<template>
  <div class="item-list">
    <Row>
      <Col :span="1" align="middle">
        <slot class="my-hover" name="left"></slot>
      </Col>
      <Col :span="14" align="left" @click="handleClick">
        <Tooltip
          ><template #title>{{ title }}</template
          >{{ title }}</Tooltip
        >
      </Col>
      <Col v-if="!canDelete" :span="8" align="right" class="info" @click="handleClick"
        ><i>{{ info }}</i></Col
      >
      <Col v-else-if="canDelete" :span="8" align="right" class="del"
        ><span @click="deleteClick">{{ $t('basic.del') }}</span></Col
      >
      <Col :span="1" align="left" @click="handleClick"><i class="fas fa-caret-right"> </i></Col>
    </Row>
  </div>
</template>

<script>
  import { defineComponent } from 'vue';
  import { Tooltip } from '@jecloud/ui';
  import { Row, Col } from 'ant-design-vue';

  export default defineComponent({
    name: 'ItemList',
    components: {
      Row,
      Col,
      Tooltip,
    },
    props: {
      title: {
        type: String,
        default: '新方案名（ABC）- 办公管理系统、综合采购系统、ERP信息系统',
      },
      canDelete: {
        type: Boolean,
        default: false,
      },
      info: {
        type: String,
        default: '浏览器右下角弹出消息框',
      },
    },
    emits: ['listClick', 'deleteClick'],
    setup(props, { emit }) {
      const handleClick = () => {
        // 点击list跳转下一页
        emit('listClick', true);
      };
      // 删除
      const deleteClick = () => {
        emit('deleteClick');
      };

      return { handleClick, deleteClick };
    },
  });
</script>

<style lang="less" scoped>
  .item-list {
    &:hover {
      cursor: pointer;
    }
    margin: 0 -1px -1px 0;
    width: 810px;
    height: 40px;
    background: #ffffff;
    border: 1px solid #f1f1f1;
    // border-bottom: none;
    font-size: 14px;
    color: #333333;
    line-height: 40px;
    // &
    .ant-col-14 {
      padding-left: 5px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .ant-col-1 {
      padding-left: 10px;
    }
    .info {
      padding-right: 20px;
      color: #aaaaaa;
      font-size: 14px;
    }

    .del {
      padding-right: 20px;
      color: #d8001b;
      font-size: 14px;
      &:hover {
        cursor: pointer;
      }
    }
    &:hover {
      background: #e2e2e2;
    }
  }
</style>
